$top-hight: 40px;

.app {
  // display: none;

  // &.show {
  //   // display: block;
  // }

  .brand {
    position: absolute;
    $size: 40px;
    top: 5px;
    left: 5px;
    display: inline-block;
    // background: #2d2d2d url('../Home/logo.png') no-repeat center center;
    width: $size;
    height: $size;
    background-size: 80%;
    margin: 0 10px 0 0;
    border-radius: $size / 2;
  }

  nav:global(.fa) {
    font-size: 2em;
    line-height: 20px;
  }

  .com {
    position: fixed;
    top: $top-hight;
    //bottom:50px;  去掉是因为界面最下面老是会跳的效果，改为下面这种
    // padding-bottom: 50px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .__spEnter {
    @extend .com;
    transform: translate3d(100%, 0, 0);
  }

  .__spEnterActive {
    @extend .com;
    transform: translate3d(0, 0, 0);
    transition: all ease-out 500ms;
  }

  .__spLeave {
    @extend .com;
    transform: translate3d(0, 0, 0);
  }

  .__spLeaveActive {
    @extend .com;
    transform: translate3d(-100%, 0, 0);
    transition: all ease-out 500ms;
  }

  .__spAppear {
    opacity: .01;
  }

  .__spAppearActive {
    opacity: 1;
    transition: opacity 1.5s ease-in;
  }
  /**************************返回***************************/
  .__spEnterReturn {
    @extend .com;
    transform: translate3d(-100%, 0, 0);
  }

  .__spEnterActiveReturn {
    @extend .com;
    transform: translate3d(0, 0, 0);
    transition: all ease-out 500ms;
  }

  .__spLeaveReturn {
    @extend .com;
    transform: translate3d(0, 0, 0);
  }

  .__spLeaveActiveReturn {
    @extend .com;
    transform: translate3d(100%, 0, 0);
    transition: all ease-out 500ms;
  }

  .__spAppearReturn {
    opacity: .01;
    transition: opacity 1.5s ease-in;
  }

  .__spAppearActiveReturn {
    opacity: 1;
    transition: opacity 1.5s ease-in;
  }

  .appContent {
    // padding: 40px 0 0;
    width: 100%;
    position: absolute;
    top: 40px;

    .spEnter {
      @extend .__spEnter;
    }

    .spEnterActive {
      @extend .__spEnterActive;
    }

    .spLeave {
      @extend .__spLeave;
    }

    .spLeaveActive {
      @extend .__spLeaveActive;
    }

    .spAppear {
      @extend .__spAppear;
    }

    .spAppearActive {
      @extend .__spAppearActive;
    }
    /**************************返回***************************/
    .spEnterReturn {
      @extend .__spEnterReturn;
    }

    .spEnterActiveReturn {
      @extend .__spEnterActiveReturn;
    }

    .spLeaveReturn {
      @extend .__spLeaveReturn;
    }

    .spLeaveActiveReturn {
      @extend .__spLeaveActiveReturn;
    }

    .spAppearReturn {
      @extend .__spAppearReturn;
    }

    .spAppearActiveReturn {
      @extend .__spAppearActiveReturn;
    }
  }

  .isWeiXin {
    margin: 0;
    width: 100%;
    // background: #fff;

    .com1 {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .spEnter {
      @extend .com1;
      @extend .__spEnter;
    }

    .spEnterActive {
      @extend .com1;
      @extend .__spEnterActive;
    }

    .spLeave {
      @extend .com1;
      @extend .__spLeave;
    }

    .spLeaveActive {
      @extend .com1;
      @extend .__spLeaveActive;
    }

    .spAppear {
      @extend .com1;
      @extend .__spAppear;
    }

    .spAppearActive {
      @extend .com1;
      @extend .__spAppearActive;
    }
    /**************************返回***************************/
    .spEnterReturn {
      @extend .com1;
      @extend .__spEnterReturn;
    }

    .spEnterActiveReturn {
      @extend .com1;
      @extend .__spEnterActiveReturn;
    }

    .spLeaveReturn {
      @extend .com1;
      @extend .__spLeaveReturn;
    }

    .spLeaveActiveReturn {
      @extend .com1;
      @extend .__spLeaveActiveReturn;
    }

    .spAppearReturn {
      @extend .com1;
      @extend .__spAppearReturn;
    }

    .spAppearActiveReturn {
      @extend .com1;
      @extend .__spAppearActiveReturn;
    }
  }
}

.isWeiXinNavBar {
  height: 0;
  top: -1000px;
}
